<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>动画</title>
		<script type="text/javascript" src="vue.js"></script>
		<style type="text/css">
				/* 必须 */
			.expend-transition{
				all .3s ease;
				height: 30px;
				padding: 10px;
				background-color: #EEEEEE;
				overflow: hidden;
				}
				/* .expend-enter定义进入开始状态  .expend-leave定义离开的结束状态*/
			.expend-enter .expend-leave{
				height: 0;
				padding: 0 10px;
				opacity: 0;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<div id="div1" transition="expend">hello</div>
		</div>
		<script type="text/javascript">
			
			new Vue({
				el:"#app",
				data:{
					
				},
				methods:{
					
				}
			});
			Vue.transition("expend",{
				beforeEnter:function(el){
					el.textContent = "beforeEnter";
				},
				enter:function(el){
					el.textContent = "enter";
				}
			});
		</script>
	</body>
</html>
